<template>
  <div class="categoryContainer">
    <div class="searchBox" @click="toSearch">
      <div class="search">
        <div class="search-content">
          <i class="iconfont icon-find-faxian"></i>
          <span class="search-text">搜索商品，共111111款好物</span>
        </div>
      </div>
    </div>
    <div class="blank_space"></div>
    <div class="treeSelectContainer">
      <div></div>
      <div class="left">
        <div class="selector" :class="{active:currentIndex===index1}" @click="currentIndex = index1" v-for="(c1,index1) in cate1List" :key="c1.id">{{c1.name}}</div>
      </div>
      <div class="rightBox">
        <div class="right">
          <div class="recommendList">
            <div class="swipeBox" v-show="currentIndex === 0">
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
                width="300"
                height="100"
                :show-indicators="false"
              >
                <van-swipe-item v-for="(recommendSwiperimg,index) in recommendSwiperImgList" :key="recommendSwiperimg.id">
                  <img
                    class="swipe-img"
                    :src="recommendSwiperimg.picUrl"
                    alt=""
                  />
                </van-swipe-item>
              </van-swipe>
              <div class="recommendItemContainer">
                <ul class="recommendItemBox">
                  <li class="recommendItem" v-for="(c2,index4) in categoryL2List" :key="c2.id">
                    <router-link :to="`/recommenddetail?categoryL2List=${JSON.stringify(categoryL2List)}&flag=${index4}`">
                      <img :src="c2.bannerUrl" alt="" class="recommendItem-Img">
                    </router-link>
                    <span class="recommendItem-text">{{c2.name}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="cateListBox" v-show="currentIndex === 1">
            <div class="headerImgBox">
              <img class="headerImg" :src="elseBannerImgList"></img>
            </div>
            <div class="cateList" v-for="(category,index2) in categoryGroupList" :key="category.id">
              <div class="header">{{category.name}}</div>
              <ul class="list">
                <li class="item" v-for="(categoryDetail,index3) in category.categoryList" :key="categoryDetail.id">
                  <div>
                    <div class="itemBox">
                      <img
                        class="item-img"
                        :src="categoryDetail.wapBannerUrl"
                        alt=""
                      />
                    </div>
                    <div class="itemName">{{categoryDetail.name}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="cateListBox" v-show="currentIndex !== 1 && currentIndex !== 0">
            <div class="headerImgBox">
              <img class="headerImg" :src="elseBannerImgList"></img>
            </div>
            <div class="cateList" v-for="(msjs,index5) in fuShiXieBaoList" :key="msjs.id">
              <div class="header">{{msjs.name}}</div>
              <ul class="list">
                <li class="item" v-for="(msjsDetail,index6) in msjs.categoryList" :key="msjsDetail.id">
                  <div>
                    <div class="itemBox">
                      <img
                        class="item-img"
                        :src="msjsDetail.wapBannerUrl"
                        alt=""
                      />
                    </div>
                    <div class="itemName">{{msjsDetail.name}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Category",
  data() {
    return {
      currentIndex: 0,
    };
  },
  mounted() {
    this.getRecommendList();
    this.getCategoryGroupList();
    this.getFuShiXieBaoList();
  },
  methods: {
    getRecommendList() {
      this.$store.dispatch("getRecommendList");
    },
    getCategoryGroupList() {
      this.$store.dispatch("getCategoryGroupList");
    },
    getFuShiXieBaoList() {
      this.$store.dispatch("getFuShiXieBaoList");
    },
    toSearch(){
      this.$router.push('/search')
    }
  },
  computed: {
    ...mapState({
      recommendList: (state) => state.category.recommendList,
      categoryGroupList: (state) => state.category.categoryGroupList,
      fuShiXieBaoList: (state) => state.category.fuShiXieBaoList,
    }),
    cate1List() {
      return this.recommendList.categoryL1List || [];
    },
    elseBannerImgList() {
      // return (((this.recommendList[this.currentIndex] || {}).subCateList || [])[0] || {}).wapBannerUrl || ""
      return ((this.cate1List || [])[this.currentIndex] || {}).bannerUrl || "";
    },
    recommendSwiperImgList() {
      return (this.recommendList.currentCategory || []).bannerList || [];
    },
    categoryL2List() {
      return this.recommendList.categoryL2List || [];
    },
  },
};
</script>

<style lang="less" scoped>
.categoryContainer {
  width: 100%;
  .searchBox {
    width: 100%;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 50px;
    background-color: #ffffff;
    border-bottom: 1px solid #666;
    box-sizing: border-box;
    .search {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0.3rem;
      position: relative;
      .search-content {
        // border: 1px solid saddlebrown;
        // box-sizing: border-box;
        background-color: #ededed;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 28px;
        border-radius: 0.08rem;
        .iconfont {
          font-size: 0.4rem;
          margin-right: 5px;
        }
        .search-text {
          font-size: 0.375rem;
          color: #666;
        }
      }
    }
  }
  .blank_space {
    height: 55.73px;
  }
  .treeSelectContainer {
    display: flex;
    // border-top: 1px solid #666;
    box-sizing: border-box;
    .left {
      display: flex;
      flex-wrap: wrap;
      width: 90px;
      height: 30px;
      .selector {
        width: 85px;
        height: 40px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        // text-align: center;
        // line-height: 40px;
      }
      .active {
        border-left: 2px solid red;
        box-sizing: border-box;
        border-right: 2px solid white;
      }
    }
    .rightBox {
      height: 80vh;
      overflow: scroll;
      .right {
        flex: 1;
        // height:100px;
        // background-color: chartreuse;
        .recommendList {
          .swipeBox {
            box-sizing: border-box;
            padding: 10px;
            .my-swipe .van-swipe-item {
              color: #fff;
              font-size: 20px;
              line-height: 150px;
              text-align: center;
              background-color: #39a9ed;
              .swipe-img {
                width: 100%;
              }
            }
          }
          .recommendItemContainer {
            .recommendItemBox {
              margin: 20px 0;
              display: flex;
              .recommendItem {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-wrap: wrap;
                margin-right: 15px;
                .recommendItem-Img {
                  width: 70px;
                  height: 70px;
                }
                .recommendItem-text {
                  font-size: 14px;
                }
              }
            }
          }
        }
        .cateListBox {
          padding: 10px;
          box-sizing: border-box;
          .headerImgBox {
            width: 270px;
            height: 100px;
            background-color: red;
            // display:flex;
            // justify-content:center;
            // align-items:center;
            .headerImg {
              height: 100px;
              width: 270px;
            }
          }
          .cateList {
            .header {
              color: #333;
              font-weight: 700;
              padding-bottom: 5px;
              margin-top: 15px;
              border-bottom: 1px solid #d9d9d9;
            }
            .list {
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              .item {
                .itemBox {
                  width: 80px;
                  height: 80px;
                  .item-img {
                    width: 80px;
                    height: 80px;
                  }
                }
                .itemName {
                  // color: #333;
                  text-align: center;
                  height: 40px;
                  width: 80px;
                  line-height: 10px;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
